<template>
	<footer>
		<div v-for="(item,index) in footerList" :key="index">
			<router-link :to="item.linkUrl">
				<i :class="['iconfont',item.icon]"></i>
				<p>{{item.title}}</p>
				<message-logo v-if="item.title==='购物车'&&allCount" :message="allCount" top="-5px" right="-5px"/>
			</router-link>
		</div>
	</footer>
</template>

<script>
	import {mapGetters} from 'vuex';

	export default {
		name: "Footer",
		data() {
			return {
				footerList: [
					{
						title: '首页',
						icon: 'icon-home',
						linkUrl: '/'
					},
					{
						title: '分类',
						icon: 'icon-classify',
						linkUrl: '/classify'
					},
					{
						title: '购物车',
						icon: 'icon-cart',
						linkUrl: '/cart'
					},
					{
						title: '个人',
						icon: 'icon-user',
						linkUrl: '/user'
					}
				]
			}
		},
		computed: {
			...mapGetters(['allCount'])
		},
		components: {
			messageLogo: () => import('#/Public/messageLogo')
		}
	}
</script>
